#main{
  width:440px;
  margin:0px auto 120px;
  position:relative;
  text-align:center;
}

#main form{
  width:440px;
  height:600px;
  background:url('../../images/form_bg2.png') no-repeat;
  padding-top: 50px;
}

form .row{
  position:relative;
}

form .row.error:after,
form .row.success:after{
  content:'';
  
  position:absolute;
  right: 60px;
    top: 8px;
  width:32px;
  height:32px;
  background:url('../../images/icons.png') no-repeat;
}

form .row.error:after{
  background-position: 0 -79px;
}

form input[type=text],
form input[type=password]{

  
  font:14px 'Segoe UI','Arial',sans-serif;
  color:#888;
  
  outline:none;
  
    
}
.formBox form input:not([type="submit"]):not([type="button"]){
	border:none;
	background:url('../../images/text-boxes2.png') no-repeat top left;
	height: 48px;
    margin: 0 auto 22px;
    padding: 0 10px 0 50px;
	width: 278px;
}
form input[type=select]{

  border:none;
  background:url('../../images/text-boxes2.png') no-repeat top left;
  font:14px 'Segoe UI','Arial',sans-serif;
  color:#888;
  
  outline:none;
  
    height: 48px;
    margin: 0 auto 22px;
    padding: 0 10px 0 50px;
    
}

form input[disabled]{
  opacity: 0.5;
}

form .email input{
  background-position:0 0 !important;
}
.formBox form input:focus,
form .email input:focus{
  background-position:0 -48px !important;
}

form .pass input{
  background-position:0 -96px !important;
}

form .pass input:focus{
  background-position:0 -144px !important;
}
.formBox form .person input,
form .firstname input{
  background-position:0 -192px !important;
}

.formBox form .firstname input:focus,
.formBox form .person input:focus{
  background-position:0 -240px !important;
}
form .lastname input{
  background-position:0 -192px !important;
}

form .lastname input:focus{
  background-position:0 -240px !important;
}

form .age input{
  background-position:0 -192px !important;
}

form .age input:focus{
  background-position:0 -240px !important;
}
#main form input[type=submit]{
  
  border: 1px solid grey;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 1px rgba(0, 0, 0, 0.3);
    color: #D3EBFF;
    cursor: pointer;
    display: block;
    font: bold 24px "Robotica","Hoefler Text",serif;
    margin: 180px auto 0;
    padding: 10px;
    text-shadow: 0 -1px 0 #444444;
    width: 410px;
    height: 50px;
    
  background-color:#0496DA;
  
  background-image: linear-gradient(#ACACAC 0%, #747474 100%);
  background-image: -o-linear-gradient(top, #ACACAC 0%, #747474 100%);
  background-image: -moz-linear-gradient(top, #ACACAC 0%, #747474 100%);
  background-image: -webkit-linear-gradient(top, #ACACAC 0%, #747474 100%);
  background-image: -ms-linear-gradient(top, #ACACAC 0%, #747474 100%);
}

#main form input[type=submit]:hover{
  
  background-color:#0383d3;
  
  background-image: linear-gradient(#747474 0%, #ACACAC 100%);
  background-image: -o-linear-gradient(top, #747474 0%, #ACACAC 100%);
  background-image: -moz-linear-gradient(top, #747474 0%, #ACACAC 100%);
  background-image: -webkit-linear-gradient(top, #747474 0%, #ACACAC 100%);
  background-image: -ms-linear-gradient(top, #747474 0%, #ACACAC 100%);
}

#main form input[type=submit]:active{
  
  background-color:#026fcb;
  
  background-image: linear-gradient(#ACACAC 0%, #747474 100%);
  background-image: -o-linear-gradient(top, #ACACAC 0%, #747474 100%);
  background-image: -moz-linear-gradient(top, #ACACAC 0%, #747474 100%);
  background-image: -webkit-linear-gradient(top, #ACACAC 0%, #747474 100%);
  background-image: -ms-linear-gradient(top, #ACACAC 0%, #747474 100%);
}

/*----------------------------
  The Arrow
-----------------------------*/


#main form .arrow{
    background: url("../../images/arrow.png") no-repeat -10px 0;
    height: 120px;
    left: 214px;
    position: absolute;
    top: 483px;
    width: 11px;
    
    /* Defining a smooth CSS3 animation for turning the arrow */
    
    -moz-transition:0.3s;
    -webkit-transition:0.3s;
    -o-transition:0.3s;
    -ms-transition:0.3s;
    transition:0.3s;
    
    /* Putting the arrow in its initial position */
    
  -moz-transform: rotate(-134deg);
  -webkit-transform: rotate(-134deg);
  -o-transform: rotate(-134deg);
  -ms-transform: rotate(-134deg);
  transform: rotate(-134deg);
}

#main form .arrowCap{
  background: url("../../images/arrow.png") no-repeat -43px 0;
  height: 20px;
  left: 208px;
  position: absolute;
  top: 535px;
  width: 20px;
  z-index: 10;
}

#main form .meterText{
  color: #575757;
  font-size: 10px;
  left: 189px;
  line-height: 1.1;
  position: absolute;
  top: 560px;
  width: 60px;
}
